<!DOCTYPE html>
<html>
<head>
  <title>零基础HTML编码</title>

  <style type="text/css">
    .pic{
      margin-left: 60px;
    }
  </style>
</head>
<body>
<h1>网站一级标题</h1>

<li>
  <a href="#">导航链接一</a>
</li>
<li>
  <a href="#">导航链接二</a>
</li>
<li>
  <a href="#">导航链接三</a>
</li>
<li>
  <a href="#">导航链接四</a>
</li>
<h2>文章一级标题</h2>
<h2>文章二级标题</h2>
<p>文章作者：王巧玲&nbsp;&nbsp;&nbsp;发布时间：2017-12-03</p>
<p>温润雍容的咖啡与苦涩难闻的中药原本是风马牛不相及的两个物件，可它们却偏偏同时出现在我的生活里，时光碾过的日子里，我戒不掉咖啡的苦，亦弃不掉中药的涩。<br/>
  我想世间再不会有第二个女子像我一样，将煮熟的咖啡盛在劣质低廉的白瓷碗里，黑褐色的看上去像是一碗中药，淼淼升起的热气夹带着咖啡特有的香气，入口圆润丝滑，才使我确认这盛在劣质白瓷碗里的汤汁，不是苦涩的中药，而是有着雍容华贵典雅的咖啡。<br/>
  <a href="http://ife.baidu.com">这里有一个链接，链接到http://ife.baidu.com</a>
爱上咖啡，或许因它华丽诱人的外表，也或许是它入口丝滑圆润的感觉，亦或许是唇角遗留的香甜，年轻时候的我独爱速溶咖啡，喝在口里，甜甜的，香香的，苦涩的味道淡淡的。我喜欢将咖啡缠绕在舌尖，体验那种圆润的丝滑，我喜欢咖啡经过喉咙时，短暂的瞬间，似一缕春风拂过，云淡风轻，惬意而温暖。<br>
那个时候的我很年轻，也很快乐，生活里除了阳光还是阳光，那个时候的我，笑是那样的真实，那样简单，那样的单纯。
</p>
<img src="F:\壁纸\html_basic1.jpg" width="377" height="303">

<h2>另一篇文章一级标题</h2>
<h2>文章二级标题</h2>
<p>文章作者：王巧玲&nbsp;&nbsp;&nbsp;发布时间：2017-12-03</p>
<p>温润雍容的咖啡与苦涩难闻的中药原本是风马牛不相及的两个物件，可它们却偏偏同时出现在我的生活里，时光碾过的日子里，我戒不掉咖啡的苦，亦弃不掉中药的涩。<br/>
  我想世间再不会有第二个女子像我一样，将煮熟的咖啡盛在劣质低廉的白瓷碗里，黑褐色的看上去像是一碗中药，淼淼升起的热气夹带着咖啡特有的香气，入口圆润丝滑，才使我确认这盛在劣质白瓷碗里的汤汁，不是苦涩的中药，而是有着雍容华贵典雅的咖啡。<br/>
  <a href="http://ife.baidu.com">这里有一个链接，链接到http://ife.baidu.com</a>
爱上咖啡，或许因它华丽诱人的外表，也或许是它入口丝滑圆润的感觉，亦或许是唇角遗留的香甜，年轻时候的我独爱速溶咖啡，喝在口里，甜甜的，香香的，苦涩的味道淡淡的。我喜欢将咖啡缠绕在舌尖，体验那种圆润的丝滑，我喜欢咖啡经过喉咙时，短暂的瞬间，似一缕春风拂过，云淡风轻，惬意而温暖。<br>
那个时候的我很年轻，也很快乐，生活里除了阳光还是阳光，那个时候的我，笑是那样的真实，那样简单，那样的单纯。
</p>
<img src="F:\壁纸\html_basic1.jpg" width="377" height="303">
<li style="margin-left: 50px;">列表项目1</li>
<li style="margin-left: 50px;">列表项目2</li>
<li style="margin-left: 50px;">列表项目3</li>

<h2 >图片</h2>
<p class="pic">好看的图片</p>
<img class="pic" src="F:\壁纸\html_basic1.jpg" width="377" height="303">
<p class="pic">好看的图片</p>
<img class="pic" src="F:\壁纸\html_basic1.jpg" width="377" height="303">
<p class="pic">好看的图片</p>
<img class="pic" src="F:\壁纸\html_basic1.jpg" width="377" height="303">
<p class="pic">好看的图片</p>
<img class="pic" src="F:\壁纸\html_basic1.jpg" width="377" height="303">
<p class="pic">好看的图片</p>
<img class="pic" src="F:\壁纸\html_basic1.jpg" width="377" height="303">
<p class="pic">好看的图片</p>
<img class="pic" src="F:\壁纸\html_basic1.jpg" width="377" height="303">
<p class="pic">好看的图片</p>
<img class="pic" src="F:\壁纸\html_basic1.jpg" width="377" height="303">
<p class="pic">好看的图片</p>
<img class="pic" src="F:\壁纸\html_basic1.jpg" width="377" height="303">
<p class="pic">好看的图片</p>
<img class="pic" src="F:\壁纸\html_basic1.jpg" width="377" height="303">
<p class="pic">好看的图片</p>
<img class="pic" src="F:\壁纸\html_basic1.jpg" width="377" height="303">

<h2>最后一篇文章一级标题</h2>
<h2>文章二级标题</h2>
<p>文章作者：王巧玲&nbsp;&nbsp;&nbsp;发布时间：2017-12-03</p>
<ol>
  <li>排名1</li>
  <li>排名2</li>
  <li>排名3</li>
</ol>
<p>下面是一个表格，给表格加了一个border="1"好让你看出是一个表格</p>
<table border="1">
  <tr >
    <td>表头</td>
    <td>表头</td>
    <td>表头</td>
  </tr>
  <tr>
    <td>表内容单元格</td>
    <td>表内容单元格</td>
    <td><a href="#">操作</a></td>
  </tr>
  <tr>
    <td>表内容单元格</td>
    <td>表内容单元格</td>
    <td >
      <a href="#">操作</a>
    </td>
  </tr>
  <tr>
    <td>表内容单元格</td>
    <td>表内容单元格</td>
    <td >
      <a href="#">操作</a>
    </td>
  </tr>
  <tr>
    <td>表内容单元格</td>
    <td>表内容单元格</td>
    <td >
      <a href="#">操作</a>
    </td>
  </tr>
  <tr>
    <td>总计</td>
    <td colspan="2">1000</td>

  </tr>
</table>


<h2>这里以后是侧栏，这是侧栏的标题</h2>
<h2>侧栏注册窗口标题</h2>
<label>请输入邮箱地址：</label>
<input type="email" name="email" placeholder="这是一个文本输入框">
<p>邮箱地址请按要求个时输入</p>
<label>请输入密码：</label>
<input type="password" name="password" placeholder="这是一个文本输入框">
<label>请重复输入密码：</label>
<input type="password" name="password" placeholder="这是一个文本输入框">
<p>密码请为6-16位英文数字</p>
<label>性别：</label>
<input type="radio" name="checkbox"><label>男</label>
<input type="radio" name="checkbox"><label>女</label>
<label>城市：</label>
<select>
  <option>北京</option>
  <option>上海</option>
  <option>天津</option>

</select>
<label>爱好：</label>
<input type="checkbox" name="">运动
<input type="checkbox" name="">艺术
<input type="checkbox" name="">科学

<label>个人描述：</label>
<textarea placeholder="这是一个多行输入框，请输入您的个人描述。">
</textarea>
<input type="button" name="submit" value="确认提交">
<p>版权所有@</p>
</body>
</html>
